<template>
	<view class="container">
		<view class="search-MN" :style="headerStyle">
			<view class="input-MN">输入以搜索..
				<i class="iconfont icon-sousuo"></i>
			</view>
		</view>
		<view class="tabs">
			<uv-tabs :list="recommendForum" lineWidth="10" lineHeight="4" :current="curFid" lineColor="#fc4c3d"
				:activeStyle="{
					color: '#fc4c3d',
					fontWeight: 'bold',
					transform: 'scale(1.15)'
		    	}" :inactiveStyle="{
					color: '#253158',
				    opacity:'.4',
					fontWeight: 'bold',
					transform: 'scale(1)'
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				<template v-slot:right>
					<view style="padding-left: 4px;" @tap="toast">
						<i class="iconfont icon-cebianlanzhankai"></i>
					</view>
				</template></uv-tabs>
		</view> 
		<view class="tabContent">
			<view v-if="curFid==0">
				<view class="banner" v-if="banner.length>0">
					<u-newswiper :swiperItems="banner" keyName="pic" showTitle radius="5"
						margin="0" height="360">
					</u-newswiper>
				</view>

				<view class="bannerAd" v-if="bannerAd.length>0">
					<image mode="aspectFill" :src="ad.url" class="bannerAd-image" v-for="ad in bannerAd"></image>
				</view>

				<view class="threadlist">
					<view class="title">24小时热帖</view>
					<z-paging ref="paging" refresher-only @onRefresh="onPulling" use-page-scroll>
						<XXL-thread :thread="thread" v-for="(thread,index) in threadList"></XXL-thread>
					</z-paging>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		getBase,
		hot24thread
	} from '@/components/kevinrong-http/forum.js'
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		mixins: [ZPMixin],
		data() {
			return {
				banner:[],
				bannerAd: [],
				headerStyle: [],
				curFid: 0,
				listQuery: {
					page: 1,
				},
				threadList: [],
				recommendForum: []
			}
		},
		async mounted() {
			await this.GetStatusBarHeight()
			await this.Base()
			await this.getFids()
		},
		methods: {
			onPulling() {
				this.listQuery = {
					page: 1
				}
				this.getFetch()
			},
			getFids() {
				if (this.curFid == 0) {
					this.getFetch()
				}
			},
			getFetch() {
				hot24thread(this.listQuery).then(r => {
					if (r.data.code == 200) {
						this.threadList = r.data.data.threadList
					}
					this.$refs.paging.complete();
				})
			},
			Base() {
				getBase().then(r => {
					if (r.data.code == 200) {
						this.recommendForum = r.data.data.recommendForum
						this.bannerAd = r.data.data.bannerAd
						this.banner = r.data.data.banner
					}
				})
			},

			GetStatusBarHeight() {
				// #ifdef MP-WEIXIN
				const SystemInfo = wx.getSystemInfoSync();
				this.headerStyle = {
					'paddingTop': SystemInfo.statusBarHeight + 50 + 'px'
				}
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f9f9f9;
		padding: 0 40rpx;
		min-height: 100vh;
	}

	.tabContent {
		.banner{
			margin-top:20rpx;
		}
		.threadlist {
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: $h2FontColor;
			}
		}

		.bannerAd {
			.bannerAd-image {
				margin: 30rpx 0;
				height: 200rpx;
				width: 100%;
				border-radius: 20rpx;
			}
		}
	}

	.tabs {
		.icon-cebianlanzhankai {
			font-weight: 800;
			font-size: 44rpx;
			color: $h2FontColor;
			position: relative;
			top: -2rpx;
		}
	}

	.search-MN {
		padding: 30rpx 0 10rpx 0;

		.input-MN {
			background-color: #ffffff;
			height: 80rpx;
			line-height: 80rpx;
			color: #adb4cb;
			width: calc(100% - 130rpx);
			padding: 0 40rpx 0 90rpx;
			font-size: 28rpx;
			position: relative;

			.iconfont {
				position: absolute;
				font-size: 36rpx;
				color: #adb4cb;
				font-weight: bold;
				top: 2rpx;
				left: 30rpx;
			}
		}
	}
</style>